<!DOCTYPE html>
<html lang=ch>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="../assets/js/api.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .center {
        margin: 0px auto;
    }

    .textcenter {
        text-align: center;
    }

    .leftfloat {
        float: left;
    }

    cleanfloat > div {
        height: 260px;
    }

    .bookcaver img {
        width: 165px;
        height: 260px;
    }

    .bookinfobox {
        float: right;
    }

    .cleanfloat {
        overflow: auto;
    }
</style>
<body>
<div id="booklist">
    <template>
        <el-table
                :data="bookData"
                style="width: 80%"
                class="center"
                :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column
                    prop="name"
                    label="书名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格">
            </el-table-column>
            <el-table-column
                    prop="inventory"
                    label="库存">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.isbn)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block center">

            <el-pagination
                    class="center textcenter"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10,20,30,50]"
                    :page-size="pagesize"
                    layout="sizes, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </template>

    <el-dialog
            :title="bookinfo.name"
            :visible.sync="bookInfodialog"
            width="600px"
            :before-close="handleClose">


    </el-dialog>

</div>
<script>
    new Vue({
        el: '#booklist',
        data: {
            bookData: [{}],
            bookinfo: {},
            currentPage: 1,
            pagesize: 10,
            bookInfodialog: false,
            innerVisible:false,
            total: 0,
            restaurants: [],
            state: ''
        }
        , created() {
            api.post("/book/list", {pageNum: this.currentPage, pageSize: this.pagesize}).then(res => {
                // console.log(res);
                if (res.state) {
                    this.bookData = res.data.list;
                    this.currentPage = res.data.pageNum;
                    this.total = res.data.total;
                    this.pagesize = res.data.pageSize;
                } else {
                    this.$message({
                        message: '服务器异常,稍后重试',
                        type: 'error'
                    });
                }

            }).catch(res => {
                this.$message({
                    message: '服务器异常,稍后重试',
                    type: 'error'
                });
            })

            api.post("/user/listname").then(res=>{
                console.log(res)
                let list = res.data.list;
                let date=[];
                list.forEach(item=>{
                    date.push({value:item.username,name:item.name})

                })
                console.log(date);
                this.restaurants=date;
            }).catch(res=>{
                console.log(res)
            })

        }
        , methods: {
            borrowing(){
                console.log(this.state);
                this.bookInfodialog=false;
                this.innerVisible=false;
                api.post("/borrow/insert",{isbn:this.bookinfo.isbn,username:this.state}).then(res=>{
                    if(res.state){
                        this.$message({
                            message: '借书成功',
                            center: true,
                            showClose: true,
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: '借书失败',
                            center: true,
                            showClose: true,
                            type: 'warning'
                        });
                    }
                }).catch(res=>{
                    this.$message({
                        message: '服务器异常',
                        center: true,
                        showClose: true,
                        type: 'error'
                    });
                })

            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${this.pagesize} 条`);
                this.updatedate()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${this.currentPage}`);
                this.updatedate()
            }, handleClick(res) {

                api.post("/book/findById", {isbn: res}).then(res => {

                    if (res.state) {
                        this.bookinfo = res.data;
                        this.bookInfodialog = true;
                    } else {
                        if (res.message == '用户未登录') {
                            sessionStorage.removeItem("user")
                            this.$confirm('用户未登录,是否跳转登录')
                                .then(_ => {
                                    parent.location.href = apiUrl + "/login.html"
                                })
                                .catch(_ => {
                                });
                        }
                    }

                }).catch(res => {
                    console.log("服务器错误", res)
                })


            }, handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },borrowbook(isbn){
                this.$confirm('确认借阅')
                    .then(_ => {
                        this.ookInfodialog=false;
                        api.post("/borrow/insert",{isbn}).then(res=>{
                            console.log(res);
                        }).catch(res=>{
                            console.log(res);
                        })
                    })
                    .catch(_ => {
                    });


            }, updatedate() {
                api.post("/book/list", {pageNum: this.currentPage, pageSize: this.pagesize}).then(res => {
                    // console.log(res);
                    if (res.state) {
                        this.bookData = res.data.list;
                        this.currentPage = res.data.pageNum;
                        this.total = res.data.total;
                        this.pagesize = res.data.pageSize;
                    } else {
                        this.$message({
                            message: '服务器异常,稍后重试',
                            type: 'error'
                        });
                    }


                }).catch(res => {
                    this.$message({
                        message: '服务器异常,稍后重试',
                        type: 'error'
                    });
                })
            }

        }
    })

</script>


</body>
</html>